<template>
	<div class="app-container">
		<el-form
			:model="queryParams"
			ref="queryForm"
			:inline="true"
			v-show="showSearch"
			label-width="68px"
		>

			<el-form-item
				label="大屏名称"
				prop="name"
			>
				<el-input
					v-model="queryParams.name"
					placeholder="请输入大屏名称"
					clearable
					size="small"
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item
				label="位置"
				prop="position"
			>
				<el-input
					v-model="queryParams.position"
					placeholder="请输入位置"
					clearable
					size="small"
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item
				label="路段"
				prop="ledRoadId"
			>
				<el-select
					v-model="queryParams.ledRoadId"
					placeholder="请选择"
				>
					<el-option
						v-for="item in roadList"
						:key="item.value"
						:label="item.roadName"
						:value="item.roadId"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item
				label="型号"
				prop="ledModelId"
			>
				<el-select
					v-model="queryParams.ledModelId"
					placeholder="请选择"
				>
					<el-option
						v-for="item in ledList"
						:key="item.value"
						:label="item.type"
						:value="item.id"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item
				label="类别"
				prop="ledTypeId"
			>
				<el-select
					v-model="queryParams.ledTypeId"
					placeholder="请选择"
				>
					<el-option
						v-for="item in ledType"
						:key="item.value"
						:label="item.name"
						:value="item.id"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item
				label="状态"
				prop="status"
			>
				<el-select
					v-model="queryParams.status"
					placeholder="请选择状态"
					clearable
					size="small"
				>
					<el-option
						v-for="dict in statusOptions"
						:key="dict.dictValue"
						:label="dict.dictLabel"
						:value="dict.dictValue"
					/>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="mini"
					@click="handleQuery"
				>搜索</el-button>
				<el-button
					icon="el-icon-refresh"
					size="mini"
					@click="resetQuery"
				>重置</el-button>
			</el-form-item>
		</el-form>

		<el-row
			:gutter="10"
			class="mb8"
		>
			<el-col :span="1.5">
				<el-button
					type="primary"
					plain
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					v-hasPermi="['led:ledInfoManage:add']"
				>新增</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="success"
					plain
					icon="el-icon-edit"
					size="mini"
					:disabled="single"
					@click="handleUpdate"
					v-hasPermi="['led:ledInfoManage:edit']"
				>修改</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="danger"
					plain
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDelete"
					v-hasPermi="['led:ledInfoManage:remove']"
				>删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					type="warning"
					plain
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					v-hasPermi="['led:ledInfoManage:export']"
				>导出</el-button>
			</el-col>
			<right-toolbar
				:showSearch.sync="showSearch"
				@queryTable="getList"
			></right-toolbar>
		</el-row>

		<el-table
			v-loading="loading"
			:data="ledInfoManageList"
			@selection-change="handleSelectionChange"
		>
			<el-table-column
				type="selection"
				width="55"
				align="center"
			/>
			<el-table-column
				label="主键"
				align="center"
				prop="id"
			/>
			<el-table-column
				label="大屏名称"
				align="center"
				prop="name"
			/>
			<el-table-column
				label="位置"
				align="center"
				prop="position"
			/>
			<el-table-column
				label="宽度"
				align="center"
				prop="width"
			/>
			<el-table-column
				label="高度"
				align="center"
				prop="higth"
			/>
			<el-table-column
				label="ip"
				align="center"
				prop="cardIp"
			/>
			<el-table-column
				label="路段"
				align="center"
				prop="ledRoadId"
			>
				<template slot-scope="scope">
					{{scope.row.ledRd.roadName}}
				</template>
			</el-table-column>
			<el-table-column
				label="型号"
				align="center"
				prop="ledModelId"
			>
				<template slot-scope="scope">
					{{scope.row.ledModel.type}}
				</template>
			</el-table-column>
			<el-table-column
				label="类别"
				align="center"
				prop="ledTypeId"
			>
				<template slot-scope="scope">
					{{scope.row.ledType.name}}
				</template>
			</el-table-column>
			<el-table-column
				label="状态"
				align="center"
				prop="status"
				:formatter="statusFormat"
			/>
			<el-table-column
				label="创建人"
				align="center"
				prop="createUser"
			/>
			<el-table-column
				label="创建时间"
				align="center"
				prop="addTime"
				width="150"
			>
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.addTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
				</template>
			</el-table-column>
			<el-table-column
				label="操作"
				align="center"
				class-name="small-padding fixed-width"
				width="180"
			>
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-sort"
						@click="connectBtn(scope.row)"
					>

					</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-tickets"
						@click="handleDetails(scope.row)"
					>详情</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-edit"
						@click="handleUpdate(scope.row)"
						v-hasPermi="['led:ledInfoManage:edit']"
					>修改</el-button>
					<el-button
						size="mini"
						type="text"
						icon="el-icon-delete"
						@click="handleDelete(scope.row)"
						v-hasPermi="['led:ledInfoManage:remove']"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total>0"
			:total="total"
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			@pagination="getList"
		/>

		<!-- 添加或修改大屏信息管理对话框 -->
		<el-dialog
			:title="title"
			:visible.sync="open"
			append-to-body
		>
			<el-form
				ref="form"
				:model="form"
				:rules="rules"
				label-width="80px"
			>
				<el-row :gutter="5">
					<el-col :span="8">
						<el-form-item
							label="大屏名称"
							prop="name"
						>
							<el-input
								v-model="form.name"
								placeholder="请输入大屏名称"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="ip"
							prop="cardIp"
						>
							<el-input
								v-model="form.cardIp"
								placeholder="请输入ip"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="端口"
							prop="cardPort"
						>
							<el-input
								v-model="form.cardPort"
								placeholder="请输入端口"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="5">
					<el-col :span="8">
						<el-form-item
							label="经度"
							prop="lng"
						>
							<el-input
								v-model="form.lng"
								placeholder="请输入经度"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="纬度"
							prop="lat"
						>
							<el-input
								v-model="form.lat"
								placeholder="请输入纬度"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="位置"
							prop="position"
						>
							<el-input
								v-model="form.position"
								placeholder="请输入位置"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="5">
					<el-col :span="8">
						<el-form-item
							label="宽度"
							prop="width"
						>
							<el-input
								v-model="form.width"
								placeholder="请输入宽度"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="高度"
							prop="higth"
						>
							<el-input
								v-model="form.higth"
								placeholder="请输入高度"
							/>
						</el-form-item>
					</el-col>

					<el-col :span="8">
						<el-form-item
							label="UID"
							prop="uId"
						>
							<el-input
								v-model="form.uId"
								placeholder="请输入UID"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="5">
					<el-col :span="8">
						<el-form-item
							label="通讯协议"
							prop="netProtocol"
						>
							<el-select
								v-model="form.netProtocol"
								placeholder="请选择通讯协议"
							>
								<el-option
									v-for="dict in netProtocolOptions"
									:key="dict.dictValue"
									:label="dict.dictLabel"
									:value="parseInt(dict.dictValue)"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="显示屏颜色"
							prop="screenColor"
						>
							<el-select
								v-model="form.screenColor"
								placeholder="请选择显示屏颜色"
							>
								<el-option
									v-for="dict in screenColorOptions"
									:key="dict.dictValue"
									:label="dict.dictLabel"
									:value="parseInt(dict.dictValue)"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="掉电保存"
							prop="powerOffSave"
						>
							<el-select
								v-model="form.powerOffSave"
								placeholder="请选择掉电保存"
							>
								<el-option
									v-for="dict in powerOffSaveOptions"
									:key="dict.dictValue"
									:label="dict.dictLabel"
									:value="parseInt(dict.dictValue)"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="5">
					<el-col :span="8">
						<el-form-item
							label="显示速度"
							prop="showSpeed"
						>
							<el-select
								v-model="form.showSpeed"
								placeholder="请选择显示速度"
							>
								<el-option
									v-for="dict in showSpeedOptions"
									:key="dict.dictValue"
									:label="dict.dictLabel"
									:value="parseInt(dict.dictValue)"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="字体大小"
							prop="fontSize"
						>
							<el-select
								v-model="form.fontSize"
								placeholder="请选择字体大小"
							>
								<el-option
									v-for="dict in fontSizeOptions"
									:key="dict.dictValue"
									:label="dict.dictLabel"
									:value="parseInt(dict.dictValue)"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="更新方式"
							prop="updateStyle"
						>
							<el-select
								v-model="form.updateStyle"
								placeholder="请选择更新方式"
							>
								<el-option
									v-for="dict in updateStyleOptions"
									:key="dict.dictValue"
									:label="dict.dictLabel"
									:value="parseInt(dict.dictValue)"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
								<el-form-item
					label="显示方式"
					prop="showStyle"
				>
					<el-select
						v-model="form.showStyle"
						placeholder="请选择显示方式"
					>
						<el-option
							v-for="dict in showStyleOptions"
							:key="dict.dictValue"
							:label="dict.dictLabel"
							:value="parseInt(dict.dictValue)"
						></el-option>
					</el-select>
				</el-form-item>
				<hr>
				<el-row :gutter="5">
					<el-col :span="8">
						<el-form-item
							label="IO板ip"
							prop="ioIp"
						>
							<el-input
								v-model="form.ioIp"
								placeholder="请输入IO板ip"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="IO板端口"
							prop="ioPort"
						>
							<el-input
								v-model="form.ioPort"
								placeholder="请输入IO板端口"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="备注"
							prop="remark"
						>
							<el-input
								v-model="form.remark"
								placeholder="请输入备注"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="5">
					<el-col :span="8">
						<el-form-item
							label="路段"
							prop="ledRoadId"
						>
							<el-select
								v-model="form.ledRoadId"
								placeholder="请选择"
							>
								<el-option
									v-for="item in roadList"
									:key="item.value"
									:label="item.roadName"
									:value="item.roadId"
								>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="型号"
							prop="ledModelId"
						>
							<el-select
								v-model="form.ledModelId"
								placeholder="请选择"
							>
								<el-option
									v-for="item in ledList"
									:key="item.value"
									:label="item.type"
									:value="item.id"
								>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="类别"
							prop="ledTypeId"
						>
							<el-select
								v-model="form.ledTypeId"
								placeholder="请选择"
							>
								<el-option
									v-for="item in ledType"
									:key="item.value"
									:label="item.name"
									:value="item.id"
								>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="5">
					<el-col :span="12">
						<el-form-item
							label="状态"
							prop="status"
						>
							<el-select
								v-model="form.status"
								placeholder="请选择状态"
							>
								<el-option
									v-for="dict in statusOptions"
									:key="dict.dictValue"
									:label="dict.dictLabel"
									:value="parseInt(dict.dictValue)"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<!-- <el-form-item
							label="创建人"
							prop="createUser"
						>
							<el-input
								v-model="form.createUser"
								placeholder="请输入创建人"
							/>
						</el-form-item> -->
					</el-col>
				</el-row>
				<el-divider content-position="center">led io设备管理信息</el-divider>
				<el-row
					:gutter="10"
					class="mb8"
				>
					<el-col :span="1.5">
						<el-button
							type="primary"
							icon="el-icon-plus"
							size="mini"
							@click="handleAddLedIoManage"
						>添加</el-button>
					</el-col>
					<el-col :span="1.5">
						<el-button
							type="danger"
							icon="el-icon-delete"
							size="mini"
							@click="handleDeleteLedIoManage"
						>删除</el-button>
					</el-col>
				</el-row>
				<el-table
					:data="ledIoManageList"
					:row-class-name="rowLedIoManageIndex"
					@selection-change="handleLedIoManageSelectionChange"
					ref="ledIoManage"
				>
					<el-table-column
						type="selection"
						width="50"
						align="center"
					/>
					<el-table-column
						label="序号"
						align="center"
						prop="index"
						width="50"
					/>
					<el-table-column
						label="线路"
						prop="lineId"
					>
						<template slot-scope="scope">
							<el-select
								v-model="scope.row.lineId"
								placeholder="请选择线路"
							>
								<el-option
									v-for="dict in lineIdOptions"
									:key="dict.dictValue"
									:label="dict.dictLabel"
									:value="dict.dictValue"
								></el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column
						label="状态"
						prop="status"
					>
						<template slot-scope="scope">
							<el-select
								v-model="scope.row.status"
								placeholder="请选择状态"
							>
								<el-option
									v-for="dict in ledstatusOptions"
									:key="dict.dictValue"
									:label="dict.dictLabel"
									:value="dict.dictValue"
								></el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column
						label="类型"
						prop="ioType"
					>
						<template slot-scope="scope">
							<el-select
								v-model="scope.row.ioType"
								placeholder="请选择类型"
							>
								<el-option
									v-for="dict in ioTypeOptions"
									:key="dict.dictValue"
									:label="dict.dictLabel"
									:value="parseInt(dict.dictValue)"
								></el-option>
							</el-select>
						</template>
					</el-table-column>
				</el-table>
			</el-form>
			<div
				slot="footer"
				class="dialog-footer"
			>
				<el-button
					type="primary"
					@click="submitForm"
				>确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<!-- 详情弹窗 -->
		<el-dialog
			title="大屏详情"
			:visible.sync="detialOpen"
			width="30%"
			append-to-body
		>
			<h5>大屏内容: {{dpDetial}}</h5>
			<el-table
				:data="ledDetails"
				:row-class-name="rowLedIoManageIndex"
				@selection-change="handleLedIoManageSelectionChange"
			>
				<el-table-column
					label="序号"
					align="center"
					prop="index"
					width="50"
				/>
				<el-table-column
					label="线路"
					prop="lineId"
				>
					<template slot-scope="scope">
						<template v-for="item in lineIdOptions">
							{{scope.row.lineId==item.dictValue?item.dictLabel:" "}}
						</template>
					</template>

				</el-table-column>
				<el-table-column
					label="状态"
					prop="status"
				>
					<template slot-scope="scope">
						<template v-for="item in ledstatusOptions">
							{{scope.row.status==item.dictValue?item.dictLabel:" "}}
						</template>
					</template>
				</el-table-column>
				<el-table-column
					label="类型"
					prop="ioType"
				>
					<template slot-scope="scope">
						<template v-for="item in ioTypeOptions">
							{{scope.row.ioType==item.dictValue?item.dictLabel:" "}}
						</template>
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					align="center"
					class-name="small-padding fixed-width"
				>
					<template slot-scope="scope">
						<el-button
							v-if="scope.row.status=='off'"
							@click="openBtn(scope.row)"
							type="success"
						>打开</el-button>
						<el-button
							v-if="scope.row.status=='on'"
							@click="closeBtn(scope.row)"
							type="danger"
						>关闭</el-button>
					</template>

				</el-table-column>
			</el-table>
			<span
				slot="footer"
				class="dialog-footer"
			>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		listLedInfoManage,
		getLedInfoManage,
		delLedInfoManage,
		addLedInfoManage,
		updateLedInfoManage,
		updateLine,
		testConnect,
	} from "@/api/led/ledInfoManage";
	// 路段
	import { listRoad } from "@/api/led/road";
	// 型号
	import { listLedModel } from "@/api/led/ledModel";
	// 类别
	import { listLedType } from "@/api/led/ledType";
	export default {
		name: "LedInfoManage",
		components: {},
		data() {
			return {
				// 详情列表id
				detialId: null,
				// 详情弹出层
				detialOpen: false,
				//大屏详情
				dpDetial: "",
				// 弹出层详情
				ledDetails: "",
								// 显示方式字典
				showStyleOptions: [],
				// 线路字典
				lineIdOptions: [],
				// 状态字典
				ledstatusOptions: [],
				// 类型字典
				ioTypeOptions: [],
				// 类别
				ledType: [],
				// 型号
				ledList: [],
				// 道路id
				roadList: [],
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 子表选中数据
				checkedLedIoManage: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 大屏信息管理表格数据
				ledInfoManageList: [],
				// led io设备管理表格数据
				ledIoManageList: [],
				// 弹出层标题
				title: "",
				// 是否显示弹出层
				open: false,
				// 显示速度字典
				showSpeedOptions: [],
				// 字体大小字典
				fontSizeOptions: [],
				// 更新方式字典
				updateStyleOptions: [],
				// 通讯协议字典
				netProtocolOptions: [],
				// 显示屏颜色字典
				screenColorOptions: [],
				// 掉电保存字典
				powerOffSaveOptions: [],
				// 状态字典
				statusOptions: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					name: null,
					position: null,
					ledRoadId: null,
					ledModelId: null,
					ledTypeId: null,
					status: null,
				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {
							showStyle: [
						{
							required: true,
							message: "显示方式不能为空",
							trigger: "change",
						},
					],
					showSpeed: [
						{
							required: true,
							message: "显示速度不能为空",
							trigger: "change",
						},
					],
					fontSize: [
						{
							required: true,
							message: "字体大小不能为空",
							trigger: "change",
						},
					],
					updateStyle: [
						{
							required: true,
							message: "更新方式不能为空",
							trigger: "change",
						},
					],
					name: [
						{
							required: true,
							message: "大屏名称不能为空",
							trigger: "blur",
						},
					],
					cardIp: [
						{ required: true, message: "ip不能为空", trigger: "blur" },
					],
					lng: [
						{
							required: true,
							message: "经度不能为空",
							trigger: "blur",
						},
					],
					lat: [
						{
							required: true,
							message: "纬度不能为空",
							trigger: "blur",
						},
					],
					position: [
						{
							required: true,
							message: "位置不能为空",
							trigger: "blur",
						},
					],
					width: [
						{
							required: true,
							message: "宽度不能为空",
							trigger: "blur",
						},
					],
					higth: [
						{
							required: true,
							message: "高度不能为空",
							trigger: "blur",
						},
					],
					uId: [
						{ required: true, message: "UID不能为空", trigger: "blur" },
					],
					netProtocol: [
						{
							required: true,
							message: "通讯协议不能为空",
							trigger: "change",
						},
					],
					screenColor: [
						{
							required: true,
							message: "显示屏颜色不能为空",
							trigger: "change",
						},
					],
					powerOffSave: [
						{
							required: true,
							message: "掉电保存不能为空",
							trigger: "change",
						},
					],
					ioIp: [
						{
							required: true,
							message: "IO板ip不能为空",
							trigger: "blur",
						},
					],
					ledRoadId: [
						{
							required: true,
							message: "路段不能为空",
							trigger: "blur",
						},
					],
					ledModelId: [
						{
							required: true,
							message: "型号不能为空",
							trigger: "blur",
						},
					],
					ledTypeId: [
						{
							required: true,
							message: "类别不能为空",
							trigger: "blur",
						},
					],
					status: [
						{
							required: true,
							message: "状态不能为空",
							trigger: "change",
						},
					],
					// createUser: [
					// 	{
					// 		required: true,
					// 		message: "创建人不能为空",
					// 		trigger: "blur",
					// 	},
					// ],
				},
			};
		},
		created() {
			this.getLedType();
			this.getledList();
			this.getRoad();
			this.getList();
			// 显示方式
				this.getDicts("led_show_style").then((response) => {
				this.showStyleOptions = response.data;
			});
			// 字体
					this.getDicts("led_font_size").then((response) => {
				this.fontSizeOptions = response.data;
			});
			// 更新方式
			this.getDicts("led_update_style").then((response) => {
				this.updateStyleOptions = response.data;
			});
			// 速度
			this.getDicts("led_show_speed").then((response) => {
				this.showSpeedOptions = response.data;
			});
			// 线路
			this.getDicts("led_io_line").then((response) => {
				this.lineIdOptions = response.data;
				console.log(this.lineIdOptions);
			});
			// 状态
			this.getDicts("led_io_status").then((response) => {
				this.ledstatusOptions = response.data;
			});
			// 类型
			this.getDicts("led_io_type").then((response) => {
				this.ioTypeOptions = response.data;
			});
			this.getDicts("led_net_protocol").then((response) => {
				this.netProtocolOptions = response.data;
			});
			this.getDicts("led_screen_color").then((response) => {
				this.screenColorOptions = response.data;
			});
			this.getDicts("led_power_off_save").then((response) => {
				this.powerOffSaveOptions = response.data;
			});
			this.getDicts("led_connect_status").then((response) => {
				this.statusOptions = response.data;
			});
		},
		methods: {
			// info() {
			// 	$.modal.msg("默认反馈");
			// },
			// 连接测试
			connectBtn(row) {
				const loading = this.$loading({
					lock: true,
					text: "连接测试中",
					spinner: "el-icon-loading",
					background: "rgba(0, 0, 0, 0.7)",
				});
				const id = row.id || this.ids;
				testConnect(id)
					.then((res) => {
						loading.close();
						console.log(res);
						if (res.code == 200) {
							this.$confirm("连接测试成功", "提示", {
								confirmButtonText: "确定",
								type: "success",
							});
						} else {
							this.$confirm("连接失败,请联系管理员稍后再试", "提示", {
								confirmButtonText: "确定",
								type: "warning",
							});
						}
					})
					.catch((err) => {
						loading.close();
						this.$confirm("led连接异常,请联系管理员稍后再试", "提示", {
							confirmButtonText: "确定",
							type: "error",
						});
					});
			},
			// 打开开关
			openBtn(e) {
				console.log(e);
				this.$confirm("确定打开开关?", "开关控制", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						updateLine({
							id: this.detialId,
							ioId: e.id,
							status: "on",
						}).then((res) => {
							console.log(res);
							if (res.code == 200) {
								getLedInfoManage(this.detialId).then((response) => {
									this.ledDetails = response.data.ledIoManageList;
								});
								this.$message({
									type: "success",
									message: "打开成功!",
								});
							} else {
								this.$message({
									type: "info",
									message: "请重试",
								});
							}
						});
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消",
						});
					});
			},
			// 关闭开关
			closeBtn(e) {
				this.$confirm("确定关闭开关?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning",
				})
					.then(() => {
						updateLine({
							id: this.detialId,
							ioId: e.id,
							status: "off",
						}).then((res) => {
							if (res.code == 200) {
								getLedInfoManage(this.detialId).then((response) => {
									this.ledDetails = response.data.ledIoManageList;
								});
								this.$message({
									type: "success",
									message: "关闭成功!",
								});
							}
						});
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消",
						});
					});
			},
			// 详情按钮
			handleDetails(row) {
				console.log(row);

				this.dpDetial = row.ledContent ? row.ledContent.content : "";
				const id = row.id || this.ids;
				console.log(id);
				this.detialId = id;
				getLedInfoManage(id).then((response) => {
					console.log(response);
					this.ledDetails = response.data.ledIoManageList;
					this.detialOpen = true;
				});

				// getRealContent(id).then((response) => {
				// 	if (response.data.ledContent != null) {
				// 		this.dpDetial = response.data.ledContent.content;
				// 		this.dpLineId = response.data.ledIoManages[0].lineId;
				// 	}
				// });
			},
			// 查询led类别
			getLedType() {
				listLedType(this.queryParams).then((response) => {
					console.log(response);
					this.ledType = response.rows;
				});
			},
			// 查询led型号
			getledList() {
				listLedModel(this.queryParams).then((response) => {
					this.ledList = response.rows;
				});
			},
			//查询道路列表
			getRoad() {
				listRoad(this.queryParams).then((response) => {
					this.roadList = response.rows;
				});
			},
			/** 查询大屏信息管理列表 */
			getList() {
				this.loading = true;
				listLedInfoManage(this.queryParams).then((response) => {
					this.ledInfoManageList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
						// 显示方式字典翻译
			showStyleFormat(row, column) {
				return this.selectDictLabel(this.showStyleOptions, row.showStyle);
			},
				// 字体大小字典翻译
			fontSizeFormat(row, column) {
				return this.selectDictLabel(this.fontSizeOptions, row.fontSize);
			},
			// 更新方式字典翻译
			updateStyleFormat(row, column) {
				return this.selectDictLabel(
					this.updateStyleOptions,
					row.updateStyle
				);
			},
			// 显示速度字典翻译
			showSpeedFormat(row, column) {
				return this.selectDictLabel(this.showSpeedOptions, row.showSpeed);
			},
			// 通讯协议字典翻译
			netProtocolFormat(row, column) {
				return this.selectDictLabel(
					this.netProtocolOptions,
					row.netProtocol
				);
			},
			// 显示屏颜色字典翻译
			screenColorFormat(row, column) {
				return this.selectDictLabel(
					this.screenColorOptions,
					row.screenColor
				);
			},
			// 掉电保存字典翻译
			powerOffSaveFormat(row, column) {
				return this.selectDictLabel(
					this.powerOffSaveOptions,
					row.powerOffSave
				);
			},
			// 状态字典翻译
			statusFormat(row, column) {
				return this.selectDictLabel(this.statusOptions, row.status);
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
								showStyle: null,
					fontSize: null,
					updateStyle: null,
					showSpeed: null,
					id: null,
					name: null,
					cardIp: null,
					cardPort: null,
					lng: null,
					lat: null,
					position: null,
					width: null,
					higth: null,
					uId: null,
					netProtocol: null,
					screenColor: null,
					powerOffSave: null,
					ioIp: null,
					ioPort: null,
					remark: null,
					ledRoadId: null,
					ledModelId: null,
					ledTypeId: null,
					status: null,
					// createUser: null,
					addTime: null,
				};
				this.ledIoManageList = [];
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map((item) => item.id);
				this.single = selection.length !== 1;
				this.multiple = !selection.length;
			},
			/** 新增按钮操作 */
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "添加大屏信息管理";
			},
			/** 修改按钮操作 */
			handleUpdate(row) {
				this.reset();
				const id = row.id || this.ids;
				getLedInfoManage(id).then((response) => {
					this.form = response.data;
					this.ledIoManageList = response.data.ledIoManageList;
					this.open = true;
					this.title = "修改大屏信息管理";
				});
			},
			/** 提交按钮 */
			submitForm() {
				this.$refs["form"].validate((valid) => {
					if (valid) {
						this.form.ledIoManageList = this.ledIoManageList;
						if (this.form.id != null) {
							updateLedInfoManage(this.form).then((response) => {
								this.msgSuccess("修改成功");
								this.open = false;
								this.getList();
							});
						} else {
							addLedInfoManage(this.form).then((response) => {
								this.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$confirm(
					'是否确认删除大屏信息管理编号为"' + ids + '"的数据项?',
					"警告",
					{
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					}
				)
					.then(function () {
						return delLedInfoManage(ids);
					})
					.then(() => {
						this.getList();
						this.msgSuccess("删除成功");
					});
			},
			/** led io设备管理序号 */
			rowLedIoManageIndex({ row, rowIndex }) {
				row.index = rowIndex + 1;
			},
			/** led io设备管理添加按钮操作 */
			handleAddLedIoManage() {
				let obj = {};
				obj.lineId = "k1";
				obj.status = "on";
				obj.ioType = 1;
				this.ledIoManageList.push(obj);
			},
			/** led io设备管理删除按钮操作 */
			handleDeleteLedIoManage() {
				if (this.checkedLedIoManage.length == 0) {
					this.$alert("请先选择要删除的led io设备管理数据", "提示", {
						confirmButtonText: "确定",
					});
				} else {
					this.ledIoManageList.splice(
						this.checkedLedIoManage[0].index - 1,
						1
					);
				}
			},
			/** 单选框选中数据 */
			handleLedIoManageSelectionChange(selection) {
				if (selection.length > 1) {
					this.$refs.ledIoManage.clearSelection();
					this.$refs.ledIoManage.toggleRowSelection(selection.pop());
				} else {
					this.checkedLedIoManage = selection;
				}
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download(
					"led/ledInfoManage/export",
					{
						...this.queryParams,
					},
					`led_ledInfoManage.xlsx`
				);
			},
		},
	};
</script>